{template 'app_common/header'}

<script>
    var title = "{php echo $title}";
    if (title !== '') {
        document.title = title;
    }
</script>

<style>
    body img{max-width: 100%;}
</style>

<body>

<section class="g-flexview">
    <div class="g-scrollview" id="J_list">
        <ul class="cjwtList" id="question_list">

        </ul>
    </div>

    <div class="creatGd">
        {template 'app_common/footer'}
    </div>
</section>

<script src="{KB_APP_JS}/jquery-3.2.1.min.js"></script>
<script src="{KB_APP_JS}/ydui.flexible.js"></script>
<script src="{KB_APP_JS}/ydui.js"></script>

<script type="text/javascript">
    !function () {
        /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
        var page = 1, pageSize = 11;
        var num = 1;
        $('#J_list').infiniteScroll({
            binder: '#J_list',
            pageSize: pageSize,
            initLoad: true,
            loadingHtml: '<strong>加载中...</strong>',
            doneTxt: '',
            loadListFn: function () {
                var def = $.Deferred();
                var cat_id = "{$_GPC['cat_id']}";
                var img_path = "{KB_APP_IMG}";

                $.ajax({
                    url: "{php echo $this->createMobileUrl('index', array('act' => 'question'))}",
                    dataType: 'json',
                    data: {cat_id: cat_id, page: page, pageSize: pageSize },
                    success: function (data) {
                        if (data.total > 0) {
                            var html = '';
                            $.each(data.question_list, function (index, item) {
                                html += '<li>' +
                                    '<div class="qContent">' +
                                    '<div class="indexNum">' + num + '</div>' +
                                    '<div class="title">' + item.question + '</div>' +
                                    '<img src="' + img_path + '/bottom.png" alt="">' +
                                    '</div>' +
                                    '<div class="qDes" style="padding-right: .24rem">' +
                                    item.answer +
                                    '</div>' +
                                    '</li>';
                                ++num;
                            });
                        }
                        $('#question_list').append(html);

                        /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                        def.resolve(data.question_list);

                        /* 页码自增1 */
                        ++page;
                    }
                });

                return def.promise();
            }
        });
    }();
    $(function () {
        //问题展示页
        $('body').on('click','.cjwtList li .qContent',function(){
            var img_path = "{KB_APP_IMG}";
            var top = img_path + '/top.png';
            bottom= img_path + '/bottom.png';

            if($(this).find('img').attr('src')==bottom){
                $(this).find('img').attr('src',top);
                $(this).siblings('.qDes').slideDown();
            }else if($(this).find('img').attr('src')==top){
                $(this).find('img').attr('src',bottom);
                $(this).siblings('.qDes').slideUp();
            }
            $(this).parent().siblings('li').find('.qDes').slideUp();
            $(this).parent().siblings('li').find('.qContent img').attr('src',bottom);
        })
    })

</script>
</body>
</html>